<template>
  <div>
    <div id="chart" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script>
import { payChartDate, payChartData } from "@/api/system/detail";
export default {
  name: "OrderChart",
  data() {
    return {
      chart: null,
      chartDate: [],
      chartData: [],
    };
  },

  mounted() {
    //由于浏览器是多线程异步执行，echarts图渲染在前，数据赋值在后了，导致了无法正常渲染。直接把渲染放在回调函数即可.
    payChartData().then((response) => {
      this.chartDate = response.data.listDate;
      this.chartData = response.data.listData;

      this.chart = this.$echarts.init(document.getElementById("chart"));
      this.chart.setOption({
        xAxis: {
          type: "category",
          data: this.chartDate,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: this.chartData,
      });
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
};
</script>